@()(implicit session: Session)
@background.main("参考基因组一览",""){

  <style>
          .update {
            border-radius: 15px 15px 15px 15px;
            background-color: transparent;
            color: gray;
            border: 0px;
          }

          .update:hover {
            color: gray;
            background-color: lightgray;
          }

          .fastq {
            background-color: transparent;
            color: gray;
            border: 0px;
          }

          .fastq:hover {
            color: black;
            text-decoration: underline;
          }

          .delete {
            border-radius: 15px 15px 15px 15px;
            background-color: transparent;
            color: gray;
            border: 0px;
          }

          .delete:hover {
            color: white;
            background-color: red;
          }

          .state {
            display: none;
          }

          .layui-layer-title {
            background-color: #428BCA;
            height: 55px;
          }
  </style>



  <div class="page-bar">
    <ul class="page-breadcrumb">
      <li>
        <a href="#">
          <i class='fa fa-sliders'></i>

          参考基因组信息

        </a>
      </li>
    </ul>
  </div>



  <div class="row">
    <div class="col-md-12 col-sm-12">
      <div class="portlet blue-madison box">

        <div class="portlet-title">
          <div class="caption">
            参考基因组信息
          </div>
        </div>


        <div class="portlet-body" id="t">

          <div class="table-responsive" >

            <table class="display table table-bordered table-hover table-striped" id="table" data-pagination="true" data-search="true"
            data-search-align="left" data-page-list="[10, 25, 50, 100]" data-multiple-search="true">

              <thead>
                <tr>
                  <th data-field="speciesname" data-sortable="true" id="speciesname">物种名</th>
                  <th data-field="date" data-sortable="true" id="date">创建时间</th>
                  <th data-field="state" data-sortable="true" id="state">运行状态</th>
                  <th data-field="operation" data-sortable="false" id="operation">操作</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="update" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 600px;">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">
            <span id="lblAddTitle" style="font-weight: bold">修改物种名：</span>
          </h4>
        </div>
        <form id="updateForm" data-toggle="validator">
          <div class="modal-body">
            <div class="row-fluid">

              <div class="row">
                <div class="col-sm-8">
                  <div class="form-group">
                    <label class="control-label">
                      物种名：
                    </label>
                    <input class="form-control" id="oldspecies" name="oldspecies" readonly="readonly" >
                  </div>
                </div>

                <div class="col-sm-8" style="display: none;" >
                  <div class="form-group">
                    <label class="control-label">
                      ID：
                    </label>
                    <input class="form-control indent" id="speciesId" name="speciesId" readonly="readonly" >
                  </div>
                </div>

                <div class="col-sm-8">
                  <div class="form-group">
                    <label class="control-label">
                      新的物种名: </label>
                    <input class="form-control" name="speciesname" id="speciesname" >
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="modal-footer bg-info">
            <button type="submit" class="btn blue" onclick="sureUpdate()">确定</button>
            <button type="button" class="btn green" data-dismiss="modal">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div id="logShow" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 1000px;">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">
            <span id="lblAddTitle" style="font-weight: bold">日志信息：</span>
            <button type="button" class="btn-remove" data-dismiss="modal" ><i class="fa fa-remove"></i></button>
          </h4>
        </div>
        <div class="modal-body">
          <div class="row-fluid" id="logInfo">

          </div>
        </div>

      </div>
    </div>
  </div>

  <div id="deleteShow" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
    <div class="modal-dialog" style="width: 400px;">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h4 class="modal-title" align="center" id="title1">
            <span id="deleteTitle" style="font-weight: bold">删除任务
              <b id="dtask">

              </b>
            </span>
          </h4>
          <h4 class="modal-title" align="center" id="title2" style="display: none">
            <span id="deleteTitle" style="font-weight: bold">删除中...</span>
          </h4>
          <h4 class="modal-title" align="center" id="title3" style="display: none">
            <span id="deleteTitle" style="font-weight: bold">删除成功</span>
          </h4>
        </div>
        <div class="row-fluid" align="center" >
          <div id="warn1">
            <img src="/assets/images/warning.png">
          </div>
          <div id="warn2" style="display: none;">
            <img src="/assets/images/timg2.gif" style="height: 109px;">
          </div>
          <div id="warn3" style="display: none;">
            <img src="/assets/images/success.png">
          </div>
        </div>
        <div class="modal-footer bg-info">
          <div align="center">
            <button type="button" class="btn red" onclick="deleteSpecies(this)" style="width: 100px;" id="btn1">
              确定</button>
            <button type="button" class="btn green" data-dismiss="modal" style="width: 100px;" id="btn2">
              取消</button>
            <button type="button" class="btn green" onclick="updateDelete()" style="width: 100px;
              display: none;" id="btn3">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>


          $(function () {
            tableInformation();
            formValidation();


            window.setInterval(function () {
              $(".state").each(function (n, value) {
                var st = value.value;
                if (st == 0) {
                  updateTable();
                }
              })
            }, 3000);


          })

          function formValidation() {
            $('#updateForm').formValidation({
              framework: 'bootstrap',
              icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
              },
              fields: {
                speciesname: {
                  validators: {
                    notEmpty: {
                      message: '不能为空!'
                    },
                    different: {
                      field: 'oldspecies',
                      message: '不能与原物种名相同'
                    },
                    remote: {
                      type: 'GET',
                      url: '@routes.SpeciesController.checkSpecies()',
                      message: '物种名重复，请重新输入'
                    }
                  }
                }
              }
            });
          }

          function updateSpecies(obj) {
            var name = obj.value;
            var id = obj.id;
            $("#oldspecies").empty();
            $("#oldspecies").val(name);
            $("#speciesId").val(id);
            $("#update").modal("show")
          }

          function sureUpdate() {
            var form = $("#updateForm")
            var fv = form.data("formValidation")
            fv.validate()
            if (fv.isValid()) {
              var index = layer.load(1, {
                shade: [0.1, '#fff']
              });
              $.ajax({
                url: "@routes.SpeciesController.updateSpeciesname()",
                type: "put",
                data: $("#updateForm").serialize(),
                success: function () {
                    layer.close(index);
                    $("#update").modal("hide")
                    cpm("table", "修改成功");
                }
              })
            }
          }

          function openDelete(obj) {
            var i = obj.id;
            var name = obj.value;
            $("#dtask").empty();
            $("#dtask").append(name);
            $("#btn1").val(i);
            deleteBefore();
            $("#deleteShow").modal("show");

          }

          function deleteSpecies(obj) {
            var id = obj.value;
            deleting();
            $.ajax({
              url: "/parametron/species/deleteSpecies?id=" + id,
              type: "delete",
              dataType: "json",
              success: function (data) {
                if (data == "success") {
                  deleteAfter();
                }
              }
            });
          }

          function updateDelete() {
            $("#deleteShow").modal("hide");
            updateTable();
          }

          function openLog(obj) {
            $("#logInfo").empty();
            var id = obj.value;
            $.ajax({
              url: "/parametron/species/getLog?id=" + id,
              type: "get",
              dataType: "json",
              success: function (data) {
                $("#logInfo").append(data.log);
                $("#logShow").modal("show")
              }
            })
          }

          function tableInformation() {
            $.ajax({
              url: "@routes.SpeciesController.getAllSpecies()",
              type: "get",
              dataType: "json",
              success: function (data) {
                $('#table').bootstrapTable({data: data});
              }
            })
          }

          function updateTable() {
            $.ajax({
              url: "@routes.SpeciesController.getAllSpecies()",
              type: "get",
              dataType: "json",
              success: function (data) {
                $("#table").bootstrapTable('load', data);
              }
            });
          }



  </script>



}